import React, { Component } from 'react'
import * as echarts from 'echarts';
import './personal.less'

export default class personal extends Component {

  componentDidMount(): void {
    var chartDom = document.getElementById('chart-radar') as HTMLElement ;
    var myChart = echarts.init(chartDom);
    var option;
    option = {
      radar: {
        indicator: [
          { name: '枪法', max: 6500 },
          { name: '制胜', max: 16000 },
          { name: '突破', max: 30000 },
          { name: '狙杀', max: 38000 },
          { name: '道具', max: 52000 },
        ]
      },
      series: [
        {
          name: 'Budget vs spending',
          type: 'radar',
          symbol: 'none',
          lineStyle: {
            width: 1,
            opacity: 0.5
          },
          data: [
            {
              value: [4200, 3000, 20000, 35000, 50000],
              name: 'Allocated Budget'
            },
            {
              value: [5000, 14000, 28000, 26000, 42000],
              name: 'Actual Spending'
            }
          ]
        }
      ]
    };

    option && myChart.setOption(option);


    var chartLineDom = document.getElementById('chart-line') as HTMLElement;
var myChartLineDom = echarts.init(chartLineDom);
var chartLineDomOption;

// prettier-ignore
const data = [["2000-06-05", 116], ["2000-06-06", 129], ["2000-06-07", 135], ["2000-06-08", 86], ["2000-06-09", 73], ["2000-06-10", 85], ["2000-06-11", 73], ["2000-06-12", 68], ["2000-06-13", 92], ["2000-06-14", 130], ["2000-06-15", 245], ["2000-06-16", 139], ["2000-06-17", 115], ["2000-06-18", 111], ["2000-06-19", 309], ["2000-06-20", 206], ["2000-06-21", 137], ["2000-06-22", 128], ["2000-06-23", 85], ["2000-06-24", 94], ["2000-06-25", 71], ["2000-06-26", 106], ["2000-06-27", 84], ["2000-06-28", 93], ["2000-06-29", 85], ["2000-06-30", 73], ["2000-07-01", 83], ["2000-07-02", 125], ["2000-07-03", 107], ["2000-07-04", 82], ["2000-07-05", 44], ["2000-07-06", 72], ["2000-07-07", 106], ["2000-07-08", 107], ["2000-07-09", 66], ["2000-07-10", 91], ["2000-07-11", 92], ["2000-07-12", 113], ["2000-07-13", 107], ["2000-07-14", 131], ["2000-07-15", 111], ["2000-07-16", 64], ["2000-07-17", 69], ["2000-07-18", 88], ["2000-07-19", 77], ["2000-07-20", 83], ["2000-07-21", 111], ["2000-07-22", 57], ["2000-07-23", 55], ["2000-07-24", 60]];
const dateList = data.map(function (item) {
  return item[0];
});
const valueList = data.map(function (item) {
  return item[1];
});
chartLineDomOption = {
  // Make gradient line here
  visualMap: [
    {
      show: false,
      type: 'continuous',
      seriesIndex: 0,
      min: 0,
      max: 400
    },
    {
      show: false,
      type: 'continuous',
      seriesIndex: 1,
      dimension: 0,
      min: 0,
      max: dateList.length - 1
    }
  ],
  title: [
    {
      top: '5%',
      left: 'center',
      text: '各月总击杀数'
    },
    {
      top: '53%',
      left: 'center',
      text: '各月MVP场数'
    }
  ],
  tooltip: {
    trigger: 'axis'
  },
  xAxis: [
    {
      data: dateList
    },
    {
      data: dateList,
      gridIndex: 1
    }
  ],
  yAxis: [
    {},
    {
      gridIndex: 1
    }
  ],
  grid: [
    {
      bottom: '60%'
    },
    {
      top: '60%'
    }
  ],
  series: [
    {
      type: 'line',
      showSymbol: false,
      data: valueList
    },
    {
      type: 'line',
      showSymbol: false,
      data: valueList,
      xAxisIndex: 1,
      yAxisIndex: 1
    }
  ]
};

chartLineDomOption && myChartLineDom.setOption(chartLineDomOption);



  }

  render() {
    return (
      <div className='personal'>
        <div className='rate'>
          <div className='rate-card'>
          <p className='rate-card-number'>0</p>
            <p className='rate-card-title'>总场数</p>
          </div>
          <div className='rate-card'>
            <p className='rate-card-number'>0</p>
            <p className='rate-card-title'>五杀次数</p>
          </div>
          <div className='rate-card'>
            <p className='rate-card-number'>0%</p>
            <p className='rate-card-title'>爆头率</p>
          </div>
          <div className='rate-card'>
          <p className='rate-card-number'>0.00</p>
            <p className='rate-card-title'>最高天梯分</p>
          </div>
        </div>
        <div className='chart'>
          <div className='chart-left'>
            <div id='chart-radar'></div>
          </div>
          <div className='chart-right'>
          <div id='chart-line'></div>
          </div>
        </div>
      </div>
    )
  }
}
